<template>
    <div class="app-container">
        <a-spin tip="加载中..." :spinning="spinning">
            <div class="wrap">
                <!-- 设备页面 detail -->
                <div class="detail-box panel">
                    <div class="update-time">
                        统计时间：<span>{{ devicesDayPower.reportTime }}</span>
                        <a href="javascript:void(0)" @click="query">刷新</a>
                    </div>
                </div>

                <div class="detail-box panel">
                    <!-- 左侧 -->
                    <div class="detail-box-left">
                        <!-- 发电概况 -->
                        <devices-electricity :devices-id="id" :dp="devicesDayPower.dp" :cp="devicesDayPower.cp" :p="devicesDayPower.p" :capacity="devices.capacity" />
                    </div>
                    <!-- 右侧 -->
                    <div class="detail-box-right">
                        <!-- 设备基本信息 -->
                        <devices-info :devices="devices" />
                    </div>
                </div>
                <div class="detail-box panel">
                    <!-- 一半宽度 -->
                    <div class="detail-box-half">
                        <!-- 交流信息 -->
                        <alternating :devices-day-power="devicesDayPower" />
                    </div>
                    <!-- 一半宽度 -->
                    <div class="detail-box-half">
                        <!-- 直流信息 -->
                        <direct :devices-day-power="devicesDayPower" />
                    </div>
                </div>

                <div class="detail-box panel">
                    <!-- 故障记录 -->
                    <alarm-record :devices-id="id" />
                </div>

                <div class="detail-box panel">
                    <!-- 组串信息(电流/安培) -->
                    <div class="x-content-box">
                        <h1 class="x-title">组串信息(电流/安培)</h1>
                        <div class="x-content-inner">
                            <table class="x-table">
                                <tr>
                                    <td class="lab">PV1</td>
                                    <td class="con">0.30 / 0</td>
                                    <td class="lab">PV2</td>
                                    <td class="con">0.20 / 0.20</td>
                                    <td class="lab">PV3</td>
                                    <td class="con">0.30 / 0</td>
                                    <td class="lab">PV4</td>
                                    <td class="con">0.20 / 0.00</td>
                                    <td class="lab">PV5</td>
                                    <td class="con">0.30 / 0</td>
                                </tr>
                                <tr>
                                    <td class="lab">PV6</td>
                                    <td class="con">0.20 / 0</td>
                                    <td class="lab">PV7</td>
                                    <td class="con">0.20 / 0</td>
                                    <td class="lab">PV8</td>
                                    <td class="con">0.00 / 0.00</td>
                                    <td class="lab">PV9</td>
                                    <td class="con">0.10 / 0</td>
                                    <td class="lab">PV10</td>
                                    <td class="con">0 / 0.10</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="detail-box panel">
                    <!-- 指标统计 -->
                    <div class="x-content-box">
                        <h1 class="x-title">指标统计</h1>
                        <div class="x-title-inline">select多选组件</div>
                        <ul class="x-title-tabs">
                            <!-- 选中状态追加 tab-active -->
                            <li class="tab-active">
                                <a href="#nogo">日统计</a>
                            </li>
                            <li>
                                <a href="#nogo">月统计</a>
                            </li>
                            <li>
                                <a href="#nogo">年统计</a>
                            </li>
                            <li>
                                <a href="#nogo">总量统计</a>
                            </li>
                        </ul>
                        <div class="x-content-inner">
                            <!-- 这里是时间切换 -->
                            <div class="time-switch">时间组件</div>
                            <!-- 以下图片仅为占位使用，请替换为真实图表 -->
                            <!--<img src="assets/images/test/chart04.png" alt="" />-->
                        </div>
                    </div>
                </div>
            </div>
        </a-spin>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import DevicesInfo from '/@/components/DevicesInfo/index.vue'
import DevicesElectricity from '/@/components/DevicesElectricity/index.vue'
import Alternating from '/@/components/Alternating/index.vue'
import AlarmRecord from '/@/components/AlarmRecord/index.vue'
import Direct from '/@/components/Direct/index.vue'
import { latest } from '/@/api/Inverter/DevicesPowerDay/index.js'
import { clone } from '@iframe/tools/utils/Tools.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import { getById } from '/@/api/Inverter/Devices/index.js'

const route = useRoute()
const id = ref()
const spinning = ref(false)
id.value = parseInt(route.query.id)

const devices = reactive({})
const devicesDayPower = reactive({})

const query = () => {
    spinning.value = true
    latest({ devicesId: id.value })
        .then(result => {
            if (result.code === SUCCESS_CODE) {
                clone(devicesDayPower, result.data)
            }
            spinning.value = false
        })
        .catch(err => {
            console.error(err)
            spinning.value = false
        })
}
const queryDevices = () => {
    if (id.value) {
        getById(id.value).then(result => {
            if (result.code === SUCCESS_CODE) {
                clone(devices, result.data)
            }
        })
    }
}

query()
queryDevices()
</script>
<style lang="css" scoped>
.wrap {
    padding: 0;
}
</style>
